<template>
        <div class="form-group">
            <div class="input-group">
                <input :type="type" class="form-control" :placeholder="placeholder" :value="password"
                    @input="$emit('input',$event.target.value)">
                <div class="input-group-append">
                    <button type="button" class="btn btn-primary"
                        @click="isShowPassword=!isShowPassword">{{ passwordButtonText }}</button>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    name:'FormGroupPassword',
    model: {
                prop: 'password',
                event: 'input'
            },
            props: {
                password: {
                    default: ''
                },
                placeholder: {
                    default: ''
                }
            },
            data: function () {
                return {
                    isShowPassword: false
                }
            },
            computed: {
                passwordButtonText: function () {
                    return this.isShowPassword ? '隐藏' : '显示'
                },
                type: function () {
                    return this.isShowPassword ? 'text' : 'password'
                }
            }
}
</script>